<template>
    <view class="order-item">
        <view class="order-item-header">
            <label class="item-radio" v-if="data.State != 5 && data.State != 11" @click.stop="change(isSelect)">
                <custom-checkbox :isSelect="isSelect"></custom-checkbox>
            </label>
            <view class="order-item-top">
                <text class="order-desc-text">订单编号：{{ data.Sn }}</text>
                <text class="order-desc-text">下单时间：{{ data.AddTime }}</text>
                <view v-if="data.State == 5 || data.State == 11">{{ data.StateName }}</view>
            </view>
        </view>

        <view class="order-item-main" @click="goOrderDetail(data.OrderId)">
            <view class="order-item-imgs" v-if="data.DetailList && data.DetailList.length">
                <view class="img-item" v-for="(item, index) in data.DetailList.slice(0, 4)" :key="index">
                    <image mode="aspectFill" :src="easyGetImgUrl(item.ProductImage)" class="order-item-img"></image>
                    <view class="text-num"
                        ><text>x</text><text class="amountnum">{{ item.Amount }}</text
                        ><text>{{ item.UnitName ? item.UnitName : item.RatioUnit }}</text></view
                    >
                </view>
            </view>

            <view class="right">
                <view class="right-box">
                    <text class="right-box-text" v-if="data.DetailList.length > 4">···</text>
                    <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                </view>
            </view>
        </view>

        <view style="padding: 20rpx 20rpx 0">
            <text class="order-desc"
                >共{{ getTotalNum() }}件，总计:<text style="color: #fa6400">￥{{ getTotalPrice() }}</text></text
            >
        </view>

        <view class="person-info">
            <view class="info">
                <view>提货人：{{ data.OrderContactName }}</view>
                <view>手机号：{{ data.OrderContactTel }}</view>
            </view>
            <view class="num"> 待提{{ data.ProductCount }}件 </view>
        </view>

        <view class="order-item-bottom">
            <view class="commission">
                <view>佣金</view>
                <view style="color: #fa6400">￥{{ data.Commission }}</view>
            </view>
            <view class="order-state-menu">
                <text class="btn btn-gray" @click="call">联系提货人</text>
                <text
                    class="btn btn-success"
                    v-if="
                        (data.SortingState == 6 || data.SortingState == 7) &&
                        data.State != 5 &&
                        data.State != 11 &&
                        data.State != 17 &&
                        data.State != 10
                    "
                    @click="orderTakeNotify(data.OrderId)"
                    >通知可提货</text
                >
            </view>
        </view>
        <!-- <view class="order-state">待提货</view> -->
    </view>
</template>

<script>
import { orderTakeNotify } from "@/service/api/communtiyGroup.js"
import customCheckbox from "@/components/common/custom-checkbox.vue"
export default {
    components: {
        customCheckbox,
    },
    props: {
        data: {
            type: Object,
            default: {},
        },
        // 选中数据
        selectData: {
            type: Array,
            default() {
                return []
            },
        },
    },
    data() {
        return {
            isSelect: false,
            subIds: [],
        }
    },
    watch: {
        selectData(e) {
            this.isSelectFn(e)
        },
    },
    methods: {
        change(isSelect) {
            let obj = {
                isSelect: !isSelect,
                id: this.data.ID,
            }
            this.$emit("changeCheck", obj)
        },
        isSelectFn(data) {
            this.isSelect = data.includes(this.data.ID)
        },
        getTotalNum() {
            let num = 0
            this.data.DetailList.forEach((e) => {
                num += e.Amount
            })
            return num
        },
        getTotalPrice() {
            let price = this.data.PriceSum - this.data.PolicyDiscount - this.data.CouponMoney
            if (price < 0) {
                return 0.0
            } else {
                return price.toFixed(2)
            }
        },
        call() {
            uni.makePhoneCall({
                phoneNumber: this.data.OrderContactTel,
            })
        },
        goOrderDetail(id) {
            this.easyGoTo("/pages_group/packet/order/task/order-detail?id=" + id + "&form=sorting")
        },
        orderTakeNotify(id) {
            orderTakeNotify({
                orderIds: id,
            }).then((res) => {
                if (res.State == 1) {
                    this.easyToast("通知成功")
                }
            })
        },
    },
}
</script>

<style lang="scss">
@import "style/orderItem.scss";
.order-item-header {
    padding: 0 0 0 24rpx;
    display: flex;
    align-items: center;
    .order-item-top {
        position: relative;
        flex: 1;
        view {
            text-align: center;
            width: 90rpx;
            height: 38rpx;
            line-height: 38rpx;
            border-radius: 8rpx;
            border: 1rpx solid #666;
            color: #666;
            font-size: 22rpx;
            position: absolute;
            right: 0;
            top: 48rpx;
        }
    }
}
.order-item {
    background: $color-white;
    border-radius: 10rpx;
    position: relative;
    margin: 20rpx $app-page-padding;
}
.item-head {
    display: flex;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 24rpx;
    justify-content: space-between;
    border-bottom: #ebebeb solid 1px;
    .date {
        font-size: 30rpx;
        font-weight: bold;
    }
    .state {
        font-size: 24rpx;
    }
}
.order-item-main {
    padding: $app-page-padding $app-page-padding 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: none;
    .info-list {
        .info-item {
            display: flex;
            padding: 0 0 20rpx 0;
            .name {
                width: 60px;
                font-size: 28rpx;
                color: $color-gray-3;
            }
            .val {
                font-size: 28rpx;
            }
        }
    }
}
.order-no {
    display: flex;
    padding: $app-page-padding;
    font-size: 28rpx;
    border-top: #ebebeb solid 1px;
    align-items: center;
    .info {
        flex: 1;
        .no {
            color: #007aff;
        }
    }
}
.order-state-menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .btn {
        margin-left: $app-page-padding;
    }
}
.order-item-bottom {
    display: flex;
    justify-content: space-between;
    align-item: center;
    padding: 12rpx $app-page-padding $app-page-padding $app-page-padding;
    .commission {
        font-size: 24rpx;
    }
}

.person-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx;
    padding: 20rpx;
    font-size: 24rpx;
    background: #f8f8f8;
    border-radius: 8px;
    .num {
        font-size: 28rpx;
        font-weight: bold;
        color: #fa6400;
    }
}

.right {
    .right-box {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        .right-box-text {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding-right: 24rpx;
            font-family:
                PingFangSC-Medium,
                PingFang SC;
            font-weight: 500;
            letter-spacing: 2rpx;
        }
    }
    .order-desc {
        color: $app-color-text-tip;
    }
}
.pro-text {
    font-size: $font-size-28;
    font-weight: 600;
}
.text-num {
    display: flex;
    line-height: 40rpx;
    text {
        display: block;
        color: #fff;
    }
    .amountnum {
        height: 40rpx;
        line-height: 40rpx;
        color: #fff;
        max-width: 80rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
.flex-start-img {
    width: 36rpx;
    height: 40rpx;
}
</style>
